<template>
  <div class="index-box" ref="index">
      <div class="menuList" ref="menuList">
        <div class="menu-item" :class="[item.orderStatus==searchForm.orderStatus?'active':'']"  @click="handleItem(item.orderStatus)" v-for="(item,index) in menuList" :key="index">
          <div class="numberBox">
            <span class="number">{{item.count}}</span>
          </div>
          <div class="text">{{item.msg}}</div>
        </div>
      </div>
        <div class="search" ref="search">
         <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
           class="demo-form-inline" id="searchBox">
           <el-form-item prop="orderNo">
               <el-input v-model="searchForm.orderNo" clearable placeholder="订单编号" style="width:230px !important;"></el-input>
           </el-form-item>
           <el-form-item prop="goodsName">
               <el-input v-model="searchForm.goodsName" clearable placeholder="商品名称"></el-input>
           </el-form-item>
           <el-form-item prop="userName">
               <el-input v-model="searchForm.userName" clearable placeholder="收货人姓名或手机号"></el-input>
           </el-form-item>
           <el-form-item prop="storePhone">
               <el-input v-model="searchForm.storePhone" clearable placeholder="商家手机号"></el-input>
           </el-form-item>
           <el-form-item prop="storeName">
               <el-input v-model="searchForm.storeName" clearable placeholder="商家名称"></el-input>
           </el-form-item>
           <el-form-item prop="orderTime">
             <el-date-picker v-model="orderTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="下单开始日期" end-placeholder="下单结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item prop="updateTime">
             <el-date-picker v-model="updateTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="付款开始日期" end-placeholder="付款结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item class="clearfix">
             <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
             <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
             <el-button
               style="margin-left:10px"
               type="warning"
               icon="el-icon-download"
               size="small"
               :loading="btnLoading"
               v-has="'order:goodPresent:down'"
               @click="handleExport"
             >导出</el-button>
           </el-form-item>
           <el-form-item style="margin-left: auto;">
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
           </el-form-item>
         </el-form>
        </div>
        <div class="table orderTabel" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"  default-expand-all v-loading="loading">
            <el-table-column type="expand">
                <template slot-scope="scope">
                  <div class="item-box d-flex">
                    <div class="item-box-item-1" v-if="!hideTableColumn.includes('img')">
                      <TableShopBox :row="scope.row.goodsInfo" :index="scope.$index"></TableShopBox>
                    </div>
                    <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('allMoney')">
                        {{scope.row.goodsTotalPrice}}
                    </div>
                    <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('payMoney')">
                        {{scope.row.actualPay}}
                    </div>
                    <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('discount')">
                        {{scope.row.discountPrice}}
                    </div>

                    <div class="align-center justify-center d-flex" style="width:200px" v-if="!hideTableColumn.includes('closeMoney')">
                        <span class="ellipsis-item3" :title="scope.row.remarks">{{scope.row.remarks}}</span>
                    </div>
                    <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('status')">
                        <el-tag :type="scope.row.listClass">{{scope.row.statusName}}</el-tag>
                    </div>
                    <div class="align-center justify-center d-flex" style="width:160px" v-if="!hideTableColumn.includes('createTime')">
                       <span>{{ parseTime(scope.row.createTime) }}</span>
                    </div>
                    <div class="justify-center d-flex flex-wrap" style="width:280px" v-if="!hideTableColumn.includes('addressee')">
                      <div style="width:100%;text-align: center;" class="d-flex align-center justify-center">{{scope.row.receiveUser}}({{scope.row.receivePhone}})</div>
                      <div style="width:100%;text-align: center;height: 20px;" clasa="ellipsis-item" v-if="scope.row.orderStatus!='13'">{{scope.row.receiveAddress}}</div>
                    </div>
                    <div class="justify-center d-flex flex-wrap" style="width:160px" v-if="!hideTableColumn.includes('storeName')">
                        <div style="width:100%;text-align: center;" class="d-flex align-center justify-center">{{scope.row.storeName}}</div>
                        <div style="width:100%;text-align: center;">{{scope.row.storeTelphone}}</div>
                    </div>
                    <div class="align-center justify-center d-flex flex1"  v-if="!hideTableColumn.includes('closeMoney')">
                        <div class="verticalBtn">
                          <el-button
                            type="text"
                            icon="el-icon-s-order"
                            @click="handleGoDetail(scope.row)"
                          >查看详情</el-button>
                           <el-button
                             v-if="scope.row.orderStatus=='10' && scope.row.orderStatus!='13'"
                             type="text"
                             icon="el-icon-message-solid"
                             @click="handleGoAfterSale(scope.row)"
                           >售后信息</el-button>
                        </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
               <el-table-column prop="" label="商品" v-if="!hideTableColumn.includes('img')" width="550" align="center">
                 <template #default="scope">
                  <div class="d-flex">
                    <span class="font-size-13 color-999 margin-left-10">订单编号:{{ scope.row.orderNo }}</span>
                    <span class="font-size-13 color-999 margin-left-10">订单类型:{{ scope.row.orderTypeName }}</span>
                    <span class="font-size-13 color-999 margin-left-10">付款时间:{{ parseTime(scope.row.createTime) }}</span>
                  </div>
                 </template>
               </el-table-column>
              <el-table-column prop="" label="总价(元)" v-if="!hideTableColumn.includes('total')" align="center" width="160"></el-table-column>
              <el-table-column prop="" label="实际支付（元）" v-if="!hideTableColumn.includes('actualPayment')" align="center" width="160"></el-table-column>
              <el-table-column prop="" label="已优惠(元) " v-if="!hideTableColumn.includes('discount')" align="center" width="160"></el-table-column>
              <el-table-column prop="" label="订单备注" v-if="!hideTableColumn.includes('orderRemark')" width="200" show-overflow-tooltip align="center"></el-table-column>
              <el-table-column prop="" label="状态" v-if="!hideTableColumn.includes('status')" align="center"  width="160"> </el-table-column>
              <el-table-column prop="" label="下单时间" v-if="!hideTableColumn.includes('createTime')" align="center"  width="160"> </el-table-column>
              <el-table-column prop="" label="收件信息" v-if="!hideTableColumn.includes('addressee')" align="center"  width="280"> </el-table-column>
              <el-table-column prop="" label="商家信息" v-if="!hideTableColumn.includes('storeName')" align="center"  width="160"> </el-table-column>
              <el-table-column prop="" label="操作"  v-if="!hideTableColumn.includes('active')" align="center" fixed="right"> </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>

    <!-- 售后信息 -->
    <el-dialog title="售后信息" width="1000px" v-dialogDrag :visible.sync="afterInformationVisible" @close="afterInformationVisible = false">
      <AfterSaleComponent :afterSaleObj="afterSaleList" :img="attachmentInfoList"></AfterSaleComponent>
      <div slot="footer" class="dialog-footer">
        <el-button @click="afterInformationVisible = false" size="small">关 闭</el-button>
      </div>
    </el-dialog>

    <!--物流信息弹窗-->
   <!-- <LogisticsDialog></LogisticsDialog> -->


  </div>
</template>

<script>
  import {orderList,getOrderQuantity,orderRead,orderExport} from '@/api/getData'
  import option from '../../common/option.js';
  import TableShopBox from '../order/components/tableShopBox';
  import AfterSaleComponent from '../order/components/afterSaleComponent';
  import LogisticsDialog from '../order/components/logisticsDialog'
  export default {
    components: {
      TableShopBox,
      AfterSaleComponent,
      LogisticsDialog
    },
    data() {
      return {
        loading: false,
        userLoading: false,
        btnLoading: false,
        menuIndexStatus:'0',
        menuList:[
          {msg: "待支付", count: 2, orderStatus: 1},
          {msg: "待发货", count: 0, orderStatus: 2},
          {msg: "待确认", count: 0, orderStatus: 3},

          {msg: "已完成", count: 0, orderStatus: 4},
          {msg: "待售后", count: 0, orderStatus: 5},
          {msg: "所有", count: 2, orderStatus: 0}],
          orderTime:[],
          updateTime:[],
        searchForm: {
          goodsName: '',
          nickName: '',
          orderNo: '',
          orderType:1,
          orderStatus:'',
          storeName:'',
          storePhone:'',
          userName:'',

          pageNum: 1,
          pageSize: 20,
        },
        tableColumn:[{
            name:'商品',
            value:'img'
        },{
            name:'总价',
            value:'total'
        },{
            name:'实际支付（元）',
            value:'actualPayment'
        },{
            name:'已优惠（元）',
            value:'discount'
        },{
            name:'订单备注',
            value:'orderRemark'
        },{
            name:'状态',
            value:'status'
        },{
            name:'下单时间',
            value:'createTime'
        },{
            name:'收件信息',
            value:'addressee'
        },{
            name:'商家信息',
            value:'storePhone'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:400,//table 高度
        dataList:[],
        total: 0,
        multipleSelection: '',
        dialogTitle: '',
        afterInformationVisible: false,
        afterInformationList:{},/*售后信息*/
        rules: { },

        attachmentInfoList:[],//凭证图片
        afterSaleList:{},
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.getSelect();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.menuList.offsetHeight  - this.$refs.search.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.orderTime, 'startOrderTime', 'endOrderTime');
          data = this.addDateRange(this.searchForm, this.updateTime, 'startUpdateTime', 'endUpdateTime');
          this.loading = true;
          const result = await orderList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      /** 导出按钮操作 */
       handleExport() {
        let data = this.addDateRange(this.searchForm, this.orderTime, 'startOrderTime', 'endOrderTime');
        data = this.addDateRange(this.searchForm, this.updateTime, 'startUpdateTime', 'endUpdateTime');
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return orderExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      handleGoAfterSale(row){/*查看售后信息*/
        orderRead({orderId:row.orderId}).then((result) => {
          this.afterSaleList = result.data.orderAfterSale;
          this.attachmentInfoList = result.data.attachmentInfoList;
        });
        this.afterInformationVisible = true;
      },
      getSelect(){
        getOrderQuantity({
          orderType:this.searchForm.orderType
        }).then((result) => {
          this.menuList = result.data;
        });
      },
      handleGoDetail(row){/*查看详情*/
          this.$router.push({path:'/order/orderDetail',query:{id:row.orderId}});
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.orderTime = [];
        this.updateTime = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      /** 头部数据点击 */
      handleItem(id){
        this.searchForm.orderStatus = id;
        this.dataInfo();
      },
      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },

    }
  }
</script>

<style scoped lang="scss">
    .orderTabel /deep/ .el-table__expand-icon{
      width:34px;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .menuList{
      display: flex;
      margin-bottom: 15px;
      .menu-item{
        flex:1;
        padding:20px 20px 10px 20px;
        border:1px solid #DCDFE6;
        border-right: none;
        cursor: pointer;
        .numberBox{
          display:flex;
          justify-content:center;
        }
        .tipsNumber{
           font-size: 12px;
           height: 18px;
           line-height: 18px;
           padding: 0 6px;
           text-align: center;
           white-space: nowrap;
           position:absolute;
           background:#FF2F43;
           border-radius: 10px;
           right: -16px;
           top: -6px;
           color:#fff;
        }
        .number{
          font-size: 32px;
          position:relative;
        }
        .text{
          font-size: 16px;
          color:#333333;
          text-align: center;
        }
      }
    }
    .menuList .menu-item:last-child{
      border-right: 1px solid #DCDFE6;
    }
    .menuList .menu-item:hover{
      background-color:#D8E4DD;
    }
     .menuList .menu-item.active{
        background-color: #D8E4DD;
     }
     .formDialog /deep/ .el-form-item{
       margin-bottom: 5px;
     }

    .table /deep/ .el-table__expanded-cell{
     background: #FAFCFB;
      padding:0 50px;
    }
    .table /deep/ .el-table__expanded-cell:hover{
     background: #FAFCFB!important;
    }
    .table /deep/ .el-table__expanded-cell .el-form-item{
      margin-bottom: 0px;
      margin-right: 30px;
    }
    .table /deep/ .el-table__expanded-cell .el-form-item__label,.table /deep/ .el-table__expanded-cell .el-form-item__content{
       height: 54px;
       line-height: 54px;
    }
</style>
